iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
Mobile Development

Android Studio開發系列 第 7

【DAY 7】元件介紹:Button-1-Button設計樣式(上)

  • 分享至 

  • xImage
  •  

Button元件通常用於判斷,判斷按下之後啟動某功能,而今天要說的是Button的外觀如何設計。

有的時候,我們會自己設計app的主題,但如果設計的主題和預設的按鈕風格不搭,看起來就很突兀。所以我們有時會自己設計跟app主題相近的按鈕樣式。

我們可以看到drawable這個資料夾,待會我們要設計的xml檔案就放這裡。

我們新增一個xml檔。

在程式的部分打上一些屬性,下面是例子:


buttonstyle.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle">
            <corners
                android:radius="20dip" />
            <stroke
                android:width="3dip"
                android:color="#FFFFFFFF" />
            <gradient
                android:angle="90"
                android:startColor="#FF000000"
                android:endColor="#FF009393"  />
        </shape>
    </item>
</selector>

<item>之中有許多屬性可以做更改變換,為的就是盡量符合設計者的需求。這個按鈕中我有使用到漸層色,下面我們就來看看這個按鈕使用到的一些屬性例子:

  • <item>-這個物品的所有屬性
  • <shape>-形狀,有rectangle(矩形)、line(線條)、oval(圓形)...等
  • <corners>-邊角的弧度,也可以針對個別的邊角進行調整
  • <stroke>-邊框的粗細及顏色
  • <gradient>-angle為漸層色改變的角度,startColor和endColor為漸變的兩種顏色

上面的設計成品如下圖:

到這裡設計的就差不多了,明天來看看如何套用至Button中~~


上一篇
【DAY 6】元件介紹:TextView-3-padding用法與gravity
下一篇
【DAY 8】元件應用:Button-2-Button設計樣式套用
系列文
Android Studio開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言